<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>定价审批列表 -采方</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      [v-cloak] { display: none }
    </style>
  </head>
  <body>
    <div id="q-rfxPurFixPriceReview" v-cloak>
      <q-layout>
        <q-page-container>
          <q-card class="bg-white no-shadow full-width">
            <q-card-main class="q-px-md q-py-sm relative-position">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('物料编码')"
                    v-model.trim="searchForm.matCode"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('物料名称')"
                    v-model.trim="searchForm.matName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商编码')"
                    v-model.trim="searchForm.supplierCode"></q-input>
                </q-field>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  push
                  color="primary"
                  :loading="btnLoadingSearch"
                  @click="search"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    搜索中
                  </span>
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  push
                  color="secondary"
                  :loading="btnLoadingReset"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    重置中
                  </span>
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="tableData"
                dense
                hide-bottom
                :columns="columns"
                :rows-per-page-options="[5, 10, 20]"
                :loading="listLoading"
                :pagination.sync="serverPagination"
                @request="listGet"
                row-key="id"
              >
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td key="action" :props="props">
                      <q-btn
                        v-if="props.row.createPrice.checkStatus == 0"
                        flat
                        size="xs"
                        color="primary"
                        class="q-pa-xs"
                        @click="review(props.row.id)"
                      >
                        {{ $t('审批') }}
                      </q-btn>
                      <q-btn
                        v-else
                        flat
                        disable
                        size="xs"
                        color="primary"
                        class="q-pa-xs"
                      >
                      - -
                      </q-btn>
                    </q-td>
                    <!-- <q-td key="status" :props="props" >
                      <q-chip v-if="props.row.status == 1" dense square color="positive">激活</q-chip>
                      <q-chip v-if="props.row.status == 0" dense square color="light">草稿</q-chip>
                    </q-td> -->
                    <q-td key="source" :props="props" >
                      {{ props.row.source }}
                    </q-td>
                    <q-td key="createPrice.material.code" :props="props" >
                      {{ props.row.createPrice.material.code }}
                    </q-td>
                    <q-td key="createPrice.material.name" :props="props" >
                      {{ props.row.createPrice.material.name }}
                    </q-td>
                    <q-td key="createPrice.vendor.code" :props="props" >
                      {{ props.row.createPrice.vendor.code }}
                    </q-td>
                    <q-td key="createPrice.vendor.name" :props="props" >
                      {{ props.row.createPrice.vendor.name }}
                    </q-td>
                    <q-td key="createPrice.priceType" :props="props" >
                      <q-chip v-if="props.row.createPrice.priceType == 'PB00'" dense square color="positive">正式价</q-chip>
                      <q-chip v-if="props.row.createPrice.priceType == 'ZP01'" dense square color="info">暂估价</q-chip>
                    </q-td>
                    <q-td key="createPrice.managerType" :props="props" >
                      <q-chip v-if="props.row.createPrice.managerType == 0" dense square color="positive">标准业务</q-chip>
                      <q-chip v-if="props.row.createPrice.managerType == 3" dense square color="info">委外业务</q-chip>
                    </q-td>
                    <q-td key="createPrice.groupCode" :props="props" >
                      {{ props.row.createPrice.groupCode }}
                    </q-td>
                    <q-td key="createPrice.createUserName" :props="props" >
                      {{ props.row.createPrice.createUserName }}
                    </q-td>
                    <q-td key="createPrice.minOrderQty" :props="props" >
                      {{ props.row.createPrice.minOrderQty }}
                    </q-td>
                    <q-td key="createPrice.taxCode" :props="props" >
                      {{ props.row.createPrice.taxCode }}
                    </q-td>
                    <q-td key="createPrice.deliveryTime" :props="props" >
                      {{ props.row.createPrice.deliveryTime }}
                    </q-td>
                    <q-td key="createPrice.createTime" :props="props" >
                      {{ props.row.createPrice.createTime }}
                    </q-td>
                    <q-td key="createPrice.buyerCode" :props="props" >
                      {{ props.row.createPrice.buyerCode }}
                    </q-td>
                    <q-td key="createPrice.factoryCode" :props="props" >
                      {{ props.row.createPrice.factoryCode }}
                    </q-td>
                    <q-td key="createPrice.checkStatus" :props="props" >
                      <q-chip v-if="props.row.createPrice.checkStatus == -1" dense square color="negative">驳回</q-chip>
                      <q-chip v-if="props.row.createPrice.checkStatus == 0" dense square color="light">未审批</q-chip>
                      <q-chip v-if="props.row.createPrice.checkStatus == 1" dense square color="positive">通过</q-chip>
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
              <div class="row justify-end items-center text-faded">
                每页的行数：
                <q-select 
                  :options="[{label: '5', value: 5},{label: '10', value: 10},{label: '20', value: 20}]" 
                  hide-underline
                  class="q-mr-md"
                  v-model="serverPagination.rowsPerPage"></q-select>
                第
                <q-pagination
                  class="q-mt-xs"
                  v-model="serverPagination.page"
                  input
                  boundary-links
                  direction-links
                  :max-pages="5"
                  :ellipses="true"
                  :max="pages"></q-pagination>
                页 &nbsp; 共 {{ total }} 条
              </div>
              <q-inner-loading :visible="visible">
                <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
              </q-inner-loading>
            </q-card-main>
          </q-card>
        </q-page-container>
      </q-layout>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts and utils ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <script src="../script/utils.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/rfxPurFixPriceReview.js"></script>

    <script>
			// quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
			new Vue({
        el: '#q-rfxPurFixPriceReview',
        i18n: i18n,
				data: function() {
					return {
            visible: false,
            listLoading: false,
            btnLoadingReset: false,
            btnLoadingSearch: false,
            tableData: [],
            selected: [],
            serverPagination: {
              page: 1,
              rowsPerPage: 10,
              rowsNumber: 10
            },
            total: 0,
            searchForm: {
              matCode: '',
              matName: '',
              supplierCode: ''
            },
            activeChecked: 1
          }
				},
				computed: {
          columns: function() {
						return [
              {
                name: 'action',
                label: '操作',
                align: 'center'
              },
              {
                name: 'source',
                label: '来源',
                align: 'center'
              },
              {
                name: 'createPrice.material.code',
                label: '物料编码',
                align: 'center'
              },
              {
                name: 'createPrice.material.name',
                label: '物料名称',
                align: 'center'
              },
              {
                name: 'createPrice.vendor.code',
                label: '供应商名称',
                align: 'center'
              },
              {
                name: 'createPrice.vendor.name',
                label: '供应商名称',
                align: 'center'
              },
              {
                name: 'createPrice.priceType',
                label: '价格类别',
                align: 'center'
              },
              {
                name: 'createPrice.managerType',
                label: '信息类别',
                align: 'center'
              },
              {
                name: 'createPrice.groupCode',
                label: '采购组',
                align: 'center'
              },
              {
                name: 'createPrice.createUserName',
                label: '创建人',
                align: 'center'
              },
              {
                name: 'createPrice.minOrderQty',
                label: '最小订单数量',
                align: 'center'
              },
              {
                name: 'createPrice.taxCode',
                label: '税码',
                align: 'center'
              },
              {
                name: 'createPrice.deliveryTime',
                label: '计划交货时间',
                align: 'center'
              },
              {
                name: 'createPrice.createTime',
                label: '创建时间',
                align: 'center',
                field: 'createPrice.createTime',
                sortable: true
              },
              {
                name: 'createPrice.buyerCode',
                label: '采购组织',
                align: 'center'
              },
              {
                name: 'createPrice.factoryCode',
                label: '工厂',
                align: 'center'
              },
              {
                name: 'createPrice.checkStatus',
                label: '提交状态',
                align: 'center'
              }
						]
          },
          pages: function() {
            return Math.ceil(this.total/this.serverPagination.rowsPerPage)
          }
        },
        watch: {
          'serverPagination.rowsPerPage': function(rowsPerPage) {
            this.listGet({ pagination: this.serverPagination })
          },
          'serverPagination.page': function(page) {
            this.listGet({ pagination: this.serverPagination })
          }
        },
        created: function() {
          this.listGet({ pagination: this.serverPagination })
        },
				methods: {
          listGet: function(arg) {
            var that = this
            this.listLoading = true
            this.visible = true
            this.serverPagination = arg.pagination
            axios({
              method: 'post',
              url: '/manager/rfq/approve/query',
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
                'search-LIKE_material.code': this.searchForm.matCode,
                'search-LIKE_material.name': this.searchForm.matName,
                'search-LIKE_vendor.code': this.searchForm.supplierCode,
                'search-LIKE_vendor.name': this.searchForm.supplierName,
              }
            })
            .then(function(data) {
              that.tableData = data.rows
              that.total = data.total
              that.listLoading = false
              setTimeout(function() {
                that.visible = false
              }, 500)
              that.btnLoadingSearch = false
              that.btnLoadingReset = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          search: function() {
            this.btnLoadingSearch = true
            this.listGet({ pagination: this.serverPagination })
          },
          reset: function() {
            this.btnLoadingReset = true
            this.searchForm = {  
              matCode: '',
              matName: '',
              supplierCode: ''
            }
            this.listGet({ pagination: this.serverPagination })
          },
          review: function(id) {
            var that = this
            this.$q.dialog({
              title: '审核',
              message: '请选择审核通过或是驳回。',
              ok: {
                label: '确认',
                flat: true
              },
              cancel: {
                label: '取消',
                flat: true
              },
              options: {
                type: 'radio', // 或者'checkbox' / 'toggle'
                model: 1, // 使用数组，当checkbox/toggle时! (like '[]')
                items: [
                  {label: '通过', value: 1 },
                  {label: '驳回', value: -1 }
                ]
              }
            })
            .then(function(checked) {
              axios({
                method: 'post',
                url: '/manager/rfq/approve/check/' + id + '/' + checked,
              })
              .then(function(data) {
                if (data.success) {
                  that.$q.notify({
                    message: '操作成功',
                    type: 'positive',
                    icon: 'done',
                    timeout: 1000,
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: data.msg,
                    type: 'negative',
                    icon: 'error_outline',
                    timeout: 1000,
                    position: 'top-right'
                  })
                }
                that.listGet({ pagination: that.serverPagination })
              })
              .catch(function(err) {
                console.log(err)
              })
            })
            .catch(function() {
              // 选择"Cancel"或作了关闭操作
            })
          },
				}
			})
    </script>
  </body>
</html>